<template>
	<view>
		<u-sticky bgColor="#ffffff">
			<view class="mainpadding flexbetween">
				<view class="xiaolan titletext bold" style="width: 100rpx;" @click="show=true">筛选</view>
				<view class="flexbetween ssbox" style="background-color: #fff;width: 100%;">
					<view class="flexleft">
						<u-icon name="search" color="#999" size="20"></u-icon>
						<input type="number" placeholder="请输入手机号搜索" class="hei_text main_size bold" v-model="keyword"
							confirm-type="search" @confirm="init()">
					</view>
					<view class="rightss" @click="init()">搜索</view>
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding2">
			<view class="mainpadding_top ffffff radius " v-for="(item,index) in list.data" :key="index">
				<view class="flexbetween" >
					<view class="flexleft">
						<u-icon name="phone" size="20" color="#3478f5"></u-icon>
						<view class="xiaohei main_size">{{item.user.phone}}</view>
					</view>
					<view class="xiaohong main_size bold">{{item.score}}</view>
				</view>
				<!-- <view class="xiaohei margin_top main_size">{{item.createtime_text}}</view> -->
			</view>
			
		</view>
		
		<u-popup :show="show" @close="show=false" mode="bottom" :round="10">
			<view class="mainpadding">
				<view class="titletext textcenter">筛选</view>
				<view class="margin_top strongtext">时间</view>
				<view class="flexleft flex_wrap">
					<view class="flexcenter sanshi margin_top2" v-for="item in timeList" @click="selecTimeBtn(item.id)">
						<view :class="item.id==selecttime?'haungsebtn':'huisebtn'">{{item.name}}</view>
					</view>
				</view>
				<!-- 时间 -->
				<view class="margin_top strongtext">自定义时间</view>
				<view class="flexcenter margin_top2" @click="zdysj">
					<view class="shijianbtn margin_right3" @click="zshijian">{{startime}}</view>
					<view class="xian margin_right3"></view>
					<view class="shijianbtn" @click="yshijian">{{endtime}}</view>
				</view>
				<u-datetime-picker :show="zshow" @confirm="zconfirm" v-model="value1" mode="date"
					@cancel="zshow= false"></u-datetime-picker>
				<u-datetime-picker :show="yshow" @confirm="yconfirm" v-model="value2" mode="date" @cancel="yshow= false"
					:minDate="minDate"></u-datetime-picker>
		
				<view class="flexbetween">
					<view class="chonzbtn margin_top" @click="chongzhi">重置</view>
					<view class="quedbtn1 margin_top" @click="close">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid:"",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keyword: "",
				// 时间
				startime: "开始时间",
				endtime: "结束时间",
				// 数据列表
				show: false,
				minDate: "",
				//开始时间
				zshow: false,
				value1: Number(new Date()),
				//结束
				yshow: false,
				value2: Number(new Date()),
				// 筛选
				timeList: [{
						id: 1,
						name: "今日"
					},
					{
						id: 2,
						name: "昨日"
					},
					{
						id: 3,
						name: "本月"
					},
					{
						id: 4,
						name: "上月"
					}
				],
				selecttime: 0, //筛选时间类型
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.init()
		},
		methods: {
			init(isPage, page) { //提现记录
				let _this = this;
				let url = '/api/user/getWithdrawalList'
				httpRequest.request('/api/user/tmRecordIndex', 'GET', {
					page: page || 1,
					limit: _this.limit,
					start_time: this.startime == "开始时间" ? '' : this.startime,
					end_time: this.endtime == "结束时间" ? '' : this.endtime,
					ly:1,
					mobile:this.keyword,
					tm_id:this.listid
				}, false, false, true).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			chongzhi() {
				this.selecttime = ""
				this.startime = "开始时间"
				this.endtime = "结束时间"
				this.show = false
				this.init()
			},
			// 选择时间段
			selecTimeBtn(id) {
				this.mindate = ""
				this.selecttime = id
				if (id == 1) {
					// 获取今日
					this.startime = this.riqi(0);
					this.endtime = this.riqi(0);
				} else if (id == 2) {
					// 获取昨日
					this.startime = this.riqi(-1);
					this.endtime = this.riqi(-1);
				} else if (id == 3) {
					// 获取本月
					this.startime = this.benyue();
					this.endtime = this.riqi(0);
				} else {
					this.startime = this.shangyue(1);
					this.endtime = this.shangyue(2);
				}
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 上月 1第一天，2最后一天
			shangyue(val) {
				var nowdays = new Date()
				var year = nowdays.getFullYear()
				var month = nowdays.getMonth()
				if (month == 0) {
					month = 12
					year = year - 1
				}
				if (month < 10) {
					month = '0' + month
				}
				var myDate = new Date(year, month, 0)
				var startDate = year + '-' + month + '-01' //上个月第一天
				var endDate = year + '-' + month + '-' + myDate.getDate() //上个月最后一天
				if (val == 1) {
					return startDate
				} else {
					return endDate
				}
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
			
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			// 开始时间
			zconfirm(e) {
				console.log(e)
				this.selecttime = ""
				this.minDate = e.value
				this.startime = this.date(e.value)
				this.zshow = false
			},
			zshijian() {
				this.zshow = true
			},
			//结束时间
			yconfirm(e) {
				console.log(e)
				this.selecttime = ""
				this.endtime = this.date(e.value)
				this.yshow = false
			},
			yshijian() {
				if (this.minDate == "") {
					httpRequest.toast("请选择开始时间")
					return
				}
				this.yshow = true
			},
			close() {
				this.init()
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.quedbtn1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 321rpx;
		height: 82rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #fff;
		border: 2rpx solid #3478f5;
		background-color: #3478f5;
		border-radius: 41rpx;
	}

	.chonzbtn {
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 321rpx;
		height: 82rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #3478f5;
		border: 2rpx solid #3478f5;
		background-color: #fff;
	}

	.chanpinse {
		font-size: 32rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #3478f5;
	}

	.kym {
		margin: 250rpx auto 0;
		width: 343rpx;
		height: 324rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.xian {
		width: 22rpx;
		height: 0rpx;
		background-color: #999999;
		border: 1rpx solid #999999;
	}

	.shijianbtn {
		padding: 20rpx 65rpx;
		background: #F7F9FA;
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.huisebtn {
		width: 198rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background: #F7F9FA;
		border-radius: 41rpx;
	}

	.haungsebtn {
		width: 198rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478f5;
		background: rgba(52, 120, 245, .1);
		border-radius: 41rpx;
	}

	.sanshi {
		width: 33.33%;
	}
</style>
